<template>
	<view>
		<!-- #ifdef APP-PLUS -->
		<view>
			<uni-nav-bar left-icon="arrowleft" @clickLeft="back" title="凭证列表" :statusBar='true' :fixed="true"></uni-nav-bar>
		</view>
		<!-- #endif -->
		<view class="certificatelist">
			<view class="certificatelist-title">
				<view @click="onClickSelectIndex(3)" :class="{ 'certificatelist-title-item-active': selectIndex === 3 }" class="certificatelist-title-item">全部</view>
				<view @click="onClickSelectIndex(0)" :class="{ 'certificatelist-title-item-active': selectIndex === 0 }" class="certificatelist-title-item">待确认</view>
				<view @click="onClickSelectIndex(1)" :class="{ 'certificatelist-title-item-active': selectIndex === 1 }" class="certificatelist-title-item">已确认</view>
				<view @click="onClickSelectIndex(2)" :class="{ 'certificatelist-title-item-active': selectIndex === 2 }" class="certificatelist-title-item">驳回</view>
			</view>
			<!-- #ifdef APP-PLUS -->
			<scroll-view @scrolltolower="allScrolltolower" :scroll-with-animation='true' scroll-y v-show="selectIndex === 3" :style="{ 'display': selectIndex === 3 ? 'flex' : 'none', 'height': appListHeight + 'px' }" class="certificatelist-list">
			<!-- #endif -->
			<!-- #ifndef APP-PLUS -->
			<scroll-view @scrolltolower="allScrolltolower" :scroll-with-animation='true' scroll-y v-show="selectIndex === 3" :style="{ 'display': selectIndex === 3 ? 'flex' : 'none', 'height': h5ListHeight + 'px' }" class="certificatelist-list">
			<!-- #endif -->
				<view v-for="item of purchases_all" :key="item.id" class="certificatelist-list-item">
					<view class="certificatelist-list-item-name">
						<text class="certificatelist-list-item-name-left">商家名称：{{ item.storeName }}</text>
						<text v-if="item.status === '0'" class="certificatelist-list-item-name-status handleimg">待确认</text>
						<text v-if="item.status === '1'" class="certificatelist-list-item-name-status handleimg">已确认</text>
						<text v-if="item.status === '2'" class="certificatelist-list-item-name-status oppose">驳回</text>
					</view>
					<view class="certificatelist-list-item-price">
						<text class="certificatelist-list-item-price-left">实付：¥{{ item.sellingPrice }}</text>
						<text class="certificatelist-list-item-price-left">面值：¥{{ item.facePrice }}</text>
					</view>
					<view class="certificatelist-list-item-line"></view>
					<view class="certificatelist-list-item-dh">单号：{{ item.id }}</view>
					<view class="certificatelist-list-item-time">提交时间：{{ item.createdAt }}</view>
					<view class="certificatelist-list-item-time">折扣率：{{ item.rate }}</view>
					<view v-if="item.status==='2'" class="certificatelist-list-item-ly">
						<text class="certificatelist-list-item-ly-txt">驳回理由：{{ item.remark }}</text>
						<view class="certificatelist-list-item-ly-btn" @click="goChanging(item)">修改凭证</view>
					</view>
				</view>	
			</scroll-view>
			<!-- #ifdef APP-PLUS -->
			<scroll-view :scroll-with-animation='true' scroll-y v-show="selectIndex === 0" :style="{ 'display': selectIndex === 0 ? 'flex' : 'none', 'height': appListHeight + 'px' }" class="certificatelist-list">
			<!-- #endif -->
			<!-- #ifndef APP-PLUS -->
			<scroll-view :scroll-with-animation='true' scroll-y v-show="selectIndex === 0" :style="{ 'display': selectIndex === 0 ? 'flex' : 'none', 'height': h5ListHeight + 'px' }" class="certificatelist-list">
			<!-- #endif -->
				<view v-for="item of purchases_d" :key="item.id" class="certificatelist-list-item">
					<view class="certificatelist-list-item-name">
						<text class="certificatelist-list-item-name-left">商家名称：{{ item.storeName }}</text>
						<text v-if="item.status === '0'" class="certificatelist-list-item-name-status handleimg">待确认</text>
						<text v-if="item.status === '1'" class="certificatelist-list-item-name-status handleimg">已确认</text>
						<text v-if="item.status === '2'" class="certificatelist-list-item-name-status oppose">驳回</text>
					</view>
					<view class="certificatelist-list-item-price">
						<text class="certificatelist-list-item-price-left">实付：¥{{ item.sellingPrice }}</text>
						<text class="certificatelist-list-item-price-left">面值：¥{{ item.facePrice }}</text>
					</view>
					<view class="certificatelist-list-item-line"></view>
					<view class="certificatelist-list-item-dh">单号：{{ item.id }}</view>
					<view class="certificatelist-list-item-time">提交时间：{{ item.createdAt }}</view>
					<view class="certificatelist-list-item-time">折扣率：{{ item.rate }}</view>
					<view v-if="item.status==='2'" class="certificatelist-list-item-ly">
						<text class="certificatelist-list-item-ly-txt">驳回理由：{{ item.remark }}</text>
						<view class="certificatelist-list-item-ly-btn" @click="goChanging(item)">修改凭证</view>
					</view>
				</view>	
			</scroll-view>
			<!-- #ifdef APP-PLUS -->
			<scroll-view :scroll-with-animation='true' scroll-y v-show="selectIndex === 1" :style="{ 'display': selectIndex === 1 ? 'flex' : 'none', 'height': appListHeight + 'px' }" class="certificatelist-list">
			<!-- #endif -->
			<!-- #ifndef APP-PLUS -->
			<scroll-view :scroll-with-animation='true' scroll-y v-show="selectIndex === 1" :style="{ 'display': selectIndex === 1 ? 'flex' : 'none', 'height': h5ListHeight + 'px' }" class="certificatelist-list">
			<!-- #endif -->
				<view v-for="item of purchases_y" :key="item.id" class="certificatelist-list-item">
					<view class="certificatelist-list-item-name">
						<text class="certificatelist-list-item-name-left">商家名称：{{ item.storeName }}</text>
						<text v-if="item.status === '0'" class="certificatelist-list-item-name-status handleimg">待确认</text>
						<text v-if="item.status === '1'" class="certificatelist-list-item-name-status handleimg">已确认</text>
						<text v-if="item.status === '2'" class="certificatelist-list-item-name-status oppose">驳回</text>
					</view>
					<view class="certificatelist-list-item-price">
						<text class="certificatelist-list-item-price-left">实付：¥{{ item.sellingPrice }}</text>
						<text class="certificatelist-list-item-price-left">面值：¥{{ item.facePrice }}</text>
					</view>
					<view class="certificatelist-list-item-line"></view>
					<view class="certificatelist-list-item-dh">单号：{{ item.id }}</view>
					<view class="certificatelist-list-item-time">提交时间：{{ item.createdAt }}</view>
					<view class="certificatelist-list-item-time">折扣率：{{ item.rate }}</view>
					<view v-if="item.status==='2'" class="certificatelist-list-item-ly">
						<text class="certificatelist-list-item-ly-txt">驳回理由：{{ item.remark }}</text>
						<view class="certificatelist-list-item-ly-btn" @click="goChanging(item)">修改凭证</view>
					</view>
				</view>	
			</scroll-view>
			<!-- #ifdef APP-PLUS -->
			<scroll-view :scroll-with-animation='true' scroll-y v-show="selectIndex === 2" :style="{ 'display': selectIndex === 2 ? 'flex' : 'none', 'height': appListHeight + 'px' }" class="certificatelist-list">
			<!-- #endif -->
			<!-- #ifndef APP-PLUS -->
			<scroll-view :scroll-with-animation='true' scroll-y v-show="selectIndex === 2" :style="{ 'display': selectIndex === 2 ? 'flex' : 'none', 'height': h5ListHeight + 'px' }" class="certificatelist-list">
			<!-- #endif -->
				<view v-for="item of purchases_b" :key="item.id" class="certificatelist-list-item">
					<view class="certificatelist-list-item-name">
						<text class="certificatelist-list-item-name-left">商家名称：{{ item.storeName }}</text>
						<text v-if="item.status === '0'" class="certificatelist-list-item-name-status handleimg">待确认</text>
						<text v-if="item.status === '1'" class="certificatelist-list-item-name-status handleimg">已确认</text>
						<text v-if="item.status === '2'" class="certificatelist-list-item-name-status oppose">驳回</text>
					</view>
					<view class="certificatelist-list-item-price">
						<text class="certificatelist-list-item-price-left">实付：¥{{ item.sellingPrice }}</text>
						<text class="certificatelist-list-item-price-left">面值：¥{{ item.facePrice }}</text>
					</view>
					<view class="certificatelist-list-item-line"></view>
					<view class="certificatelist-list-item-dh">单号：{{ item.id }}</view>
					<view class="certificatelist-list-item-time">提交时间：{{ item.createdAt }}</view>
					<view class="certificatelist-list-item-time">折扣率：{{ item.rate }}</view>
					<view v-if="item.status==='2'" class="certificatelist-list-item-ly">
						<text class="certificatelist-list-item-ly-txt">驳回理由：{{ item.remark }}</text>
						<view class="certificatelist-list-item-ly-btn" @click="goChanging(item)">修改凭证</view>
					</view>
				</view>	
			</scroll-view>
			<view @click="onClickAddPZ" class="certificatelist-list-addbtn">
				<view class="certificatelist-list-addbtn-wrap">新增凭证</view>
			</view>
		</view>
	</view>
</template>
<script>
import { config } from '@/utils/config.js';
import uniNavBar from '@/components/uni-nav-bar/uni-nav-bar.vue'

export default {
	data() {
		return {
			// list的height
			h5ListHeight: 0,
			appListHeight: 0,
			selectIndex: 3,
			// 全部的
			purchases_all: [],
			page_all: 1,
			size_all: 10,
			total_all: 0,
			totalPage_all: 0,
			// 待确认
			purchases_d: [],
			page_d: 1,
			size_d: 10,
			total_d: 0,
			totalPage_d: 0,
			// 已确认
			purchases_y: [],
			page_y: 1,
			size_y: 10,
			total_y: 0,
			totalPage_y: 0,
			// 驳回
			purchases_b: [],
			page_b: 1,
			size_b: 10,
			total_b: 0,
			totalPage_b: 0,
		};
	},
	components: {
		uniNavBar
	},
	onLoad() {
		const token = uni.getStorageSync('d_token')
		if (!token) {
			uni.showToast({
				icon: 'none',
				title: '尚未登录, 请先登录'
			})
			setTimeout(() => {
				uni.removeStorageSync('d_role')
				uni.removeStorageSync('d_memberId')
				uni.removeStorageSync('d_token')
				uni.removeStorageSync('d_openId')
				uni.reLaunch({
					url: '../verificationcodelogin/verificationcodelogin'
				})
			}, 777)
			return false
		}
		this._getPurchases_all() // 全部
		this._getPurchases_d() // 待确认
		this._getPurchases_y() // 已确认
		this._getPurchases_b() // 驳回
	},
	onReady() {
		const that = this
		uni.getSystemInfo({
			success: ((res) => {
				let info = uni.createSelectorQuery().select('.certificatelist-title');
				info.boundingClientRect(function(data) {
					that.h5ListHeight = res.windowHeight - data.height // 小程序和H5是可以这么设置，但是到了自定义头部的时候，是不允许这么设置的
					that.appListHeight = res.windowHeight - res.statusBarHeight - 44 - data.height
				}).exec()
			})
		})
	},
	// 下拉刷新
	onPullDownRefresh() {
		if (this.selectIndex === 0) {
			this.purchases_d = []
			this.page_d = 1
			this.size_d = 10
			this.total_d = 0
			this.totalPage_d = 0
			this._getPurchases_d()
		} else if (this.selectIndex === 1) {
			this.purchases_y = []
			this.page_y = 1
			this.size_y = 10
			this.total_y = 0
			this.totalPage_y = 0
			this._getPurchases_y()
		} else if (this.selectIndex === 2) {
			this.purchases_b = []
			this.page_b = 1
			this.size_b = 10
			this.total_b = 0
			this.totalPage_b = 0
			this._getPurchases_b()
		} else if (this.selectIndex === 3) {
			this.purchases_all = []
			this.page_all = 1
			this.size_all = 10
			this.total_all = 0
			this.totalPage_all = 0
			this._getPurchases_all() // 全部
		}
	},
	methods: {
		allScrolltolower() { // 全部的
			const page1 = this.page_all + 1;
			const totalPage = this.totalPage_all
			if (page1 <= totalPage) {
				this.page_all = page1
				this._getPurchases_all()
			} else {
				uni.showToast({
					title: '已经到底部了',
					icon: 'none'
				})
			}
		},
		dScrolltolower() { // 待确认
			const page1 = this.page_d + 1;
			const totalPage = this.totalPage_d
			if (page1 <= totalPage) {
				this.page_d = page1
				this._getPurchases_d()
			} else {
				uni.showToast({
					title: '已经到底部了',
					icon: 'none'
				})
			}
		},
		yScrolltolower() { // 已确认
			const page1 = this.page_y + 1;
			const totalPage = this.totalPage_y
			if (page1 <= totalPage) {
				this.page_y = page1
				this._getPurchases_y()
			} else {
				uni.showToast({
					title: '已经到底部了',
					icon: 'none'
				})
			}
		},
		bScrolltolower() { // 驳回
			const page1 = this.page_b + 1;
			const totalPage = this.totalPage_b
			if (page1 <= totalPage) {
				this.page_b = page1
				this._getPurchases_b()
			} else {
				uni.showToast({
					title: '已经到底部了',
					icon: 'none'
				})
			}
		},
		back() {
			uni.navigateBack({})
		},
		onClickSelectIndex(index) {
			this.selectIndex = index
		},
		pageTotal(rowCount, pageSize) {
			if (rowCount === null || rowCount === "") {
				return 0;
			} else {
				if ((pageSize !== 0) && (rowCount % pageSize === 0)) {
					return parseInt(rowCount / pageSize)
				}
				if ((pageSize !== 0) && (rowCount % pageSize !== 0)) {
					return parseInt(rowCount / pageSize) + 1
				}
			}
		},
		// 全部
		_getPurchases_all() {
			const page = this.page_all
			const size = this.size_all
			let url = `${config.api_base_url}agent/confirmation/${page}/${size}`;
			uni.request({
				url: url,
				header: {
					AUTH: 'ROBOT ' + uni.getStorageSync('d_token')
				},
				success: ((res) => {
					let { status, data } = res.data
					if (status.flag === true) {
						this.total_all = data.total
						this.totalPage_all = this.pageTotal(this.total_all, this.size_all)
						this.purchases_all = this.purchases_all.concat(data.rows)
					} else {
						uni.showToast({
							icon: 'none',
							title: status.msg
						})
						this.total_all = 0
						this.totalPage_all = 0
						this.purchases_all = []
					}
				}),
				fail: (() => {
					uni.showToast({
						icon: 'none',
						title: '查询失败, 网络异常'
					})
				}),
				complete: (() => {
					uni.stopPullDownRefresh()
				})
			});
		},
		// 待确认
		_getPurchases_d() {
			const page = this.page_d
			const size = this.size_d
			let url = `${config.api_base_url}agent/confirmation/0/${page}/${size}`;
			uni.request({
				url: url,
				header: {
					AUTH: 'ROBOT ' + uni.getStorageSync('d_token')
				},
				success: ((res) => {
					let { status, data } = res.data
					if (status.flag === true) {
						this.total_d = data.total
						this.totalPage_d = this.pageTotal(this.total_d, this.size_d)
						this.purchases_d = this.purchases_d.concat(data.rows)
					} else {
						uni.showToast({
							icon: 'none',
							title: status.msg
						})
						this.total_d = 0
						this.totalPage_d = 0
						this.purchases_d = []
					}
				}),
				fail: (() => {
					uni.showToast({
						icon: 'none',
						title: '查询失败, 网络异常'
					})
				}),
				complete: (() => {
					uni.stopPullDownRefresh()
				})
			});
		},
		// 已确认
		_getPurchases_y() {
			const page = this.page_y
			const size = this.size_y
			let url = `${config.api_base_url}agent/confirmation/1/${page}/${size}`;
			uni.request({
				url: url,
				header: {
					AUTH: 'ROBOT ' + uni.getStorageSync('d_token')
				},
				success: ((res) => {
					let { status, data } = res.data
					if (status.flag === true) {
						this.total_y = data.total
						this.totalPage_y = this.pageTotal(this.total_y, this.size_y)
						this.purchases_y = this.purchases_y.concat(data.rows)
					} else {
						uni.showToast({
							icon: 'none',
							title: status.msg
						})
						this.total_y = 0
						this.totalPage_y = 0
						this.purchases_y = []
					}
				}),
				fail: (() => {
					uni.showToast({
						icon: 'none',
						title: '查询失败, 网络异常'
					})
				}),
				complete: (() => {
					uni.stopPullDownRefresh()
				})
			});
		},
		// 驳回
		_getPurchases_b() {
			const page = this.page_b
			const size = this.size_b
			let url = `${config.api_base_url}agent/confirmation/2/${page}/${size}`;
			uni.request({
				url: url,
				header: {
					AUTH: 'ROBOT ' + uni.getStorageSync('d_token')
				},
				success: ((res) => {
					let { status, data } = res.data
					if (status.flag === true) {
						this.total_b = data.total
						this.totalPage_b = this.pageTotal(this.total_b, this.size_b)
						this.purchases_b = this.purchases_b.concat(data.rows)
					} else {
						uni.showToast({
							icon: 'none',
							title: status.msg
						})
						this.total_b = 0
						this.totalPage_b = 0
						this.purchases_b = []
					}
				}),
				fail: (() => {
					uni.showToast({
						icon: 'none',
						title: '查询失败, 网络异常'
					})
				}),
				complete: (() => {
					uni.stopPullDownRefresh()
				})
			});
		},
		onClickAddPZ() {
			uni.navigateTo({
				url: '../changing/changing'
			})
		},
		goChanging (e) {
			uni.navigateTo({
				url: `../changing/changing?id=${e.id}&storeId=${e.storeId}&storePhone=${e.storePhone}&voucherImage=${e.voucherImage}&sellingPrice=${e.sellingPrice}&facePrice=${e.facePrice}`
			})
		}
	}
};
</script>
<style>
page {
	background-color: #f6f5f8;
}
</style>
<style scoped>
.certificatelist {
	width: 100%;
}
.certificatelist-title {
	width: 100%;
	height: 64rpx;
	display: flex;
	align-items: center;
	box-sizing: border-box;
	padding-left: 14rpx;
	padding-right: 16rpx;
	background-color: #fff;
	box-sizing: border-box;
	border-top: 1px solid #f6f5f8;
}
.certificatelist-title-item {
	font-size: 28rpx;
	line-height: 40rpx;
	font-weight: 600;
	color: rgba(0, 0, 0, 0.85);
	display: flex;
	justify-content: center;
	align-items: center;
	width: 50%;
	height: 100%;
}
.certificatelist-title-item-active {
	color: #f02230;
	position: relative;
}
.certificatelist-title-item-active::after {
	position: absolute;
	content: ' ';
	width: 62rpx;
	height: 4rpx;
	border-radius: 2rpx;
	background-color: #f02230;
	left: 50%;
	margin-left: -31rpx;
	bottom: -8rpx;
}
.certificatelist-list {
	width: 100%;
	box-sizing: border-box;
	padding-top: 20rpx;
	padding-left: 14rpx;
	padding-right: 16rpx;
	display: flex;
	flex-direction: column;
}
.certificatelist-list-item {
	width: 100%;
	background-color: #fff;
	border-radius: 12rpx;
	box-sizing: border-box;
	padding-top: 24rpx;
	padding-left: 36rpx;
	padding-right: 28rpx;
	padding-bottom: 22rpx;
	display: flex;
	flex-direction: column;
	margin-bottom: 12rpx;
}
.certificatelist-list-item:last-child {
	margin-bottom: 0;
}
.certificatelist-list-item-name {
	display: flex;
	justify-content: space-between;
	align-items: center;
	width: 100%;
}
.certificatelist-list-item-name-left {
	font-size: 28rpx;
	font-weight: 500;
	line-height: 40rpx;
	color: #333333;
}
.certificatelist-list-item-name-status {
	font-size: 24rpx;
	font-weight: 400;
	line-height: 34rpx;
}
.handleimg {
	color: #f7b500;
}
.oppose {
	color: #f02230;
}
.certificatelist-list-item-price {
	margin-top: 12rpx;
	display: flex;
	align-items: center;
}
.certificatelist-list-item-price-left {
	font-size: 36rpx;
	font-weight: 400;
	color: rgba(0, 0, 0, 0.85);
	line-height: 50rpx;
	margin-right: 70rpx;
}
.certificatelist-list-item-price-left:last-child {
	margin-right: 0;
}
.certificatelist-list-item-line {
	width: 100%;
	height: 2rpx;
	background-color: #eeeeee;
	margin-top: 12rpx;
}
.certificatelist-list-item-dh {
	font-size: 28rpx;
	color: #6d7278;
	line-height: 40rpx;
	font-weight: 400;
	margin-top: 10rpx;
}
.certificatelist-list-item-time {
	font-size: 26rpx;
	color: #6d7278;
	line-height: 40rpx;
	font-weight: 400;
	margin-top: 6rpx;
}
.certificatelist-list-item-ly {
	display: flex;
	align-items: flex-start;
	width: 100%;
}
.certificatelist-list-item-ly-txt {
	font-size: 26rpx;
	color: #6d7278;
	line-height: 40rpx;
	flex: 1;
	font-weight: 400;
	max-width: calc(100%-132rpx);
}
.certificatelist-list-item-ly-btn {
	width: 132rpx;
	height: 50rpx;
	line-height: 50rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 24rpx;
	font-weight: 400;
	color: #0091ff;
	box-sizing: border-box;
	border: 2rpx solid rgba(0, 145, 255, 1);
	border-radius: 12rpx;
	margin-right: 0;
	margin-left: auto;
}
.certificatelist-list-addbtn {
	width: 100%;
	box-sizing: border-box;
	height: 94rpx;
	position: fixed;
	left: 0;
	bottom: 84rpx;
	padding-left: 70rpx;
	padding-right: 70rpx;
}
.certificatelist-list-addbtn-wrap {
	width: 100%;
	height: 100%;
	border-radius: 12rpx;
	background-color: #F02230;
	color: #fff;
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 32rpx;
}
</style>
